<template>
  <div class="box-bd">
    <div class="row">
      <div class="span4">
        <ul class="brick-promo-list clearfix">
          <li class="brick-item  brick-item-m">
            <a href="https://www.mi.com/buy?product_id=12159">
              <img src="../../../assets/imgs/left2.png" alt="" lazy="loaded">
            </a>
          </li>
          <li class="brick-item  brick-item-m">
            <a href="https://www.mi.com/buy?product_id=12159">
              <img src="../../../assets/imgs/left2.png" alt="" lazy="loaded">
            </a>
          </li>
        </ul>
      </div>
      <div class="span16">
        <div :class="isActive_Bottom ? '' : 'hide'">
          <ul class="brick-list clearfix">
            <div v-for="i in 7" :key="i">
              <li class="brick-item brick-item-m brick-item-m-2">
                <a href="https://www.mi.com/redmitv/70" target="_blank">
                  <div class="figure figure-img">
                    <img src="../../../assets/imgs/jiadian-thumb.png" alt="">
                  </div>
                  <h3 class="title">Redmi 红米电视 70英寸</h3>
                  <p class="desc">7000英寸震撼巨屏，4K画质，细腻如真</p>
                  <p class="price">
                    <span class="num">3199</span>元<del>3799元</del>
                  </p>
                </a>
              </li>
            </div>
            <div>
              <li class="brick-item brick-item-s">
                <a href="http://www.mi.com/mibook/air13-2019">
                  <div class="figure figure-img">
                    <img src="../../../assets/imgs/right-little.png" alt="">
                  </div>
                  <h3 class="title">Air 13.3" 2019款 </h3>
                  <p class="price">
                    <span class="num">3199</span>元
                  </p>
                </a>
              </li>
            </div>
            <li class="brick-item brick-item-s">

               <a href="http://www.mi.com/mibook/air13-2019">
                  <div class="figure figure-img">
                    <img src="../../../assets/imgs/right-little.png" alt="">
                  </div>
                  <h3 class="title">Air 13.3" 2019款 </h3>
                  <p class="price">
                    <span class="num">3199</span>元
                  </p>
                </a>
            </li>
          </ul>
        </div>
        <!-- <div></div> -->
        <div :class="isActive_Bottom ? 'hide' : ''">
          <ul class="brick-list clearfix">
            <div v-for="i in 7" :key="i">
              <li class="brick-item brick-item-m brick-item-m-2">
                <a href="https://www.mi.com/redmitv/70" target="_blank">
                  <div class="figure figure-img">
                    <img src="../../../assets/imgs/jiadian-thumb.png" alt="">
                  </div>
                  <h3 class="title">Redmi 红米电视 70英寸</h3>
                  <p class="desc">70英寸震撼巨屏，4K画质，细腻如真</p>
                  <p class="price">
                    <span class="num">3199</span>元<del>3799元</del>
                  </p>
                </a>
              </li>
            </div>
            <div>
              <li class="brick-item brick-item-s">
                <a href="http://www.mi.com/mibook/air13-2019">
                  <div class="figure figure-img">
                    <img src="../../../assets/imgs/right-little.png" alt="">
                  </div>
                  <h3 class="title">Air 13.3" 2019款 </h3>
                  <p class="price">
                    <span class="num">我是电影影音</span>元
                  </p>
                </a>
              </li>
            </div>
            <li class="brick-item brick-item-s">

               <a href="http://www.mi.com/mibook/air13-2019">
                  <div class="figure figure-img">
                    <img src="../../../assets/imgs/right-little.png" alt="">
                  </div>
                  <h3 class="title">Air 13.3" 2019款 </h3>
                  <p class="price">
                    <span class="num">3199</span>元
                  </p>
                </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Bottom',
  computed :{
    ...mapState(['isActive_Bottom'])
  }
}
</script>

<style lang="less" scoped>
.row {
  margin-left: -14px;
}
.row:after, .row:before {
    content: " ";
    display: table;
}
.row:after {
    clear: both;
}
.span4 {
  width: 234px;
}
.brick-list{
  height: 614px;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.home-brick-box .brick-list, .home-brick-box .brick-promo-list{
  margin: 0 0 -14px -14px;
}
.brick-promo-list{
  height: 614px;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.brick-promo-list .brick-item-m {
  height: 300px;
  padding: 0;
  position: relative;
  z-index: 1;
  float: left;
  width: 234px;
  margin-left: 14px;
  margin-bottom: 14px;
  background: #fff;
  a{
    display: block;
    width: 100%;
    height: 100%;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
    img{
      height: 300px;
    }
  }
  a:hover{
    z-index: 2;
    -webkit-box-shadow: 0 15px 30px rgba(0,0,0,.1);
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
    -webkit-transform: translate3d(0,-2px,0);
    transform: translate3d(0,-2px,0);
  }
}
// 右侧商品
.span16{
  width: 978px;
}
.brick-item-m-2 {
  height: 260px;
  padding: 20px 0;
  position: relative;
  z-index: 1;
  float: left;
  width: 234px;
  margin-left: 14px;
  margin-bottom: 14px;
  background: #fff;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
  list-style-type: none;
  a{
    color: #757575;
    background-color: rgba(0,0,0,0);
    .figure-img{
      width: 160px;
      height: 160px;
      margin: 0 auto 18px;
      img{
        height: 160px;
        width: 160px;
      }
    }
    .title{
      margin: 0 10px 2px;
      font-size: 14px;
      font-weight: 400;
      color: #333;
    }
    .desc{
      margin: 0 10px 10px;
      height: 18px;
      font-size: 12px;
      color: #b0b0b0;
    }
    .price{
      margin: 0 10px 14px;
      text-align: center;
      color: #ff6700;
      del{
        margin-left: .5em;
        color: #b0b0b0;
      }
    }
  }
}
.brick-item-m-2:hover{
    z-index: 2;
    -webkit-box-shadow: 0 15px 30px rgba(0,0,0,.1);
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
    -webkit-transform: translate3d(0,-2px,0);
    transform: translate3d(0,-2px,0);
}
.brick-item-m .desc, .brick-item-m .title {
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

// 右侧小方块商品
.brick-item-s {
    height: 93px;
    padding-top: 50px;
    .figure-img {
      position: absolute;
      right: 20px;
      top: 32px;
      width: 80px;
      height: 80px;
  }
  img{
    height: 80px;
    width: 80px;
  }
}
.brick-item-s:hover{
    z-index: 2;
    -webkit-box-shadow: 0 15px 30px rgba(0,0,0,.1);
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
    -webkit-transform: translate3d(0,-2px,0);
    transform: translate3d(0,-2px,0);
  }
.brick-item-s {
  position: relative;
  z-index: 1;
  float: left;
  width: 234px;
  margin-left: 14px;
  margin-bottom: 14px;
  background: #fff;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
  a{
    color: #757575;
    .title{
      color: #333;
      margin: -10px 110px 5px 30px;
      font-size: 14px;
      font-weight: 400;
    }
    .price {
    margin: 0 110px 0 30px;
    font-size: 12px;
    color: #ff6700;
    }
  }
}



.hide{
  display: none;
}
</style>